@import '../../../core/index.less';

.orin-w-countrycodeselect-root {
    padding: 0;
    margin: 0;
    height: 100%;

    .country-code-mask {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 19;
        display: flex;
        align-items: center;
        justify-content: center;
        .country-wrapper {
            width: 450/@remScale;
            max-height: 500/@remScale;
            background: @white;
            border-radius: 4/@remScale;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            .country-header {
                .dialogHeaderClass();
            }
            .country-content {
                flex: 1;
                overflow-y: auto;
                padding: 5/@remScale 20/@remScale;
                overflow-x: hidden;
                font-size: 14/@remScale;
                .scrollBarClass();
                .country-code-list {
                    width: 100%;
                    height: 100%;
                    .country-code-item {
                        padding: 0 5/@remScale;
                        line-height: 46/@remScale;
                        font-size: 15/@remScale;
                        color: #202020;
                        border-bottom: 1/@remScale solid #eeeeee;
                        cursor: pointer;
                        text-align: left;
                        position: relative;
                        user-select: none;
                        &:hover {
                            background: #F2F2F2;
                        }
                        &:last-child {
                            border-bottom: none;
                        }
                    }
                }
            }
        }
    }
    .country-code-wrapper {
        height: 100%;
        //margin-right: 12/@remScale;
        .country-code-current {
            height: 40/@remScale;
            text-align: center;
            line-height: 40/@remScale;
            padding: 0 10/@remScale;
            min-width: 80/@remScale;
            cursor: pointer;
            position: relative;
            &:after {
                content: '';
                position: absolute;
                top: 50%;
                right: 0;
                height: 50%;
                transform: translate(0, -50%);
                width: 1/@remScale;
                background: #eeeeee;
            }
            &:hover {
                border-bottom-color: @border-hover-color;
            }
            @media (max-width: @max1) {
                border-bottom: none;
            }
            .code-text {
                margin-right: 7/@remScale;
                font-size: 15/@remScale;
                color: #202022;
            }
            .icon {
                width: 12/@remScale;
                height: 12/@remScale;
            }
        }
    }
    .country-code-phone-mask {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 101;
        background: @white;
        &.show {
            .translateEnter();
        }
        &.hide {
            .translateLeave();
        }
        .country-code-phone-wrapper {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            position: relative;
            .country-code-phone-header {
                display: flex;
                flex: 0 0 50/@remScale;
                height: 50/@remScale;
                background-color: @white;
                position: relative;
                justify-content: center;
                align-items: center;
                padding: 0 50/@remScale;
                border-bottom: 1/@remScale solid #dddddd;
                .code-text {
                    font-size: 18/@remScale;
                    color: #333333;
                }

                .arrow-wrapper {
                    .backBtnStyle();
                    left: @back-btn-left;
                }
            }
            //.country-code-phone-scroll {
            //    flex: 1;
            //overflow: hidden;
            .country-code-phone-content {
                flex: 1;
                width: 100%;
                height: 100%;
                overflow-y: scroll;
                padding: 0 16/@remScale;
                -webkit-overflow-scrolling: touch;
                .country-code-phone-item {
                    border-bottom: 1/@remScale solid #DCDFE6;
                    line-height: 46/@remScale;
                    font-size: 17/@remScale;
                    text-align: left;
                    color: #000000;
                    &:last-child {
                        border-bottom: none;
                    }
                }
                &::-webkit-scrollbar {
                    width: 5/@remScale;
                }
                &::-webkit-scrollbar-thumb {
                    background-color: #A6A6A6;
                    border-left: 2/@remScale solid transparent;
                }
                &::-webkit-scrollbar-track {
                    background-color: #E5E5E5;
                    border-left: 2/@remScale solid transparent;
                }
            }
            //}

        }
    }
}